<template>
  <span>{{pageStr}} <i v-if="pageStr" @click="isDesensitize = !isDesensitize" class="el-icon-view"></i></span>
</template>

<script>
import { desensitize } from '@/utils/index.js'

export default {
  data() {
    return {
      isDesensitize: true
    }
  },
  props: {
    str: {
      type: [Number, String],
      default: '',
    },
    startIndex: {
      type: Number,
      default: 3,
    },
    endIndex: {
      type: Number,
      default: 7,
    },
    symbol: {
      type: String,
      default: '*',
    },
  },
  computed: {
    pageStr() {
      if(this.isDesensitize) {
        return desensitize(this.str || '', this.startIndex, this.endIndex, this.symbol)
      }
      return this.str;
    }
  },

}
</script>

<style lang="scss" scoped>
.el-icon-view {
  cursor: pointer;
}
</style>